<template>
	<view class="content">
		<!-- 选择充值方式 -->
		<view class="typeText">
			选择充值方式
		</view>

		<view class="typeContent" v-for="(item,index) in list" :key="index" @tap="changePayType(item)">
			<view class="left">
				<image :src="item.img" class="bankImg"></image>
				<view>{{item.title}}</view>
			</view>
			<image :src="selectId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'"
				class="iconImg"></image>
		</view>

		<view class="next" @tap="goNext">下一步</view>
	</view>
</template>

<script>
	import {
		thirdMethodPay
	} from '../../api/api.js';
	export default {
		data() {
			return {
				selectId: 21,
				list: [
					// {
					// 	id: 1,
					// 	title: '微信',
					// 	img: '../../static/shopping/wxPay.png'
					// },
					{
						id: 21,
						title: '微信-快付支付',
						img: '../../static/shopping/wxPay.png'
					},
					{
						id: 12,
						title: '支付宝',
						img: '../../static/shopping/aliPay.png'
					},
					{
						id: 3,
						title: '账号打款',
						img: '../../static/recharge/bankCard.png'
					},
					{
						id: 4,
						title: '快捷支付',
						img: '../../static/recharge/bankCard.png'
					},
					
				],
				money: ''
			}
		},
		methods: {
			changePayType(item) {
				this.selectId = item.id
			},
			// 前往下一步
			goNext() {
				if (this.selectId == 3) {
					uni.navigateTo({
						url: './bankCardInfo'
					})
					return
				}
				this.money = uni.getStorageSync('money')
				let data = {
					amount: this.money,
					payType: this.selectId,
				}
				thirdMethodPay(data).then(res => {
					if (res.code == 200) {
						if (this.selectId == 1) {
							// plus.share.getServices((res) => {
							// 	let sweixin = null
							// 	for (let i = 0; i < res.length; i++) {
							// 		if (res[i].id == 'weixin') {
							// 			sweixin = res[i]
							// 		}
							// 	}
							// 	if (sweixin) {
							// 		const payData = {
							// 			id: 1,
							// 			_from: 'mini',
							// 			//...
							// 		}
							// 		// path : 要跳转的微信小程序的页面路径 可通过 ? 拼接的形式传参
							// 		const path = `/pages/index/index?payData=${JSON.stringify(payData)}`
							// 		sweixin.launchMiniProgram({
							// 				id: 'gh_0a2f596b416d', // 原始id：gh_开头 要跳转的微信小程序原始ID(在微信小程序网页获取)
							// 				path,
							// 				type: 0, // 默认为0, 0: 正式版 1：测试版 2：体验版
							// 			},
							// 			(success) => {},
							// 			(err) => {
							// 				console.log(err)
							// 				return uni.showToast({
							// 					title: '请检查手机是否有微信应用~',
							// 					icon: 'none',
							// 				})
							// 			},
							// 		)
							// 	}
							// })

							// const wxCode = JSON.parse(res.data.payUrl)
							// WeixinJSBridge.invoke(
							// 	"getBrandWCPayRequest", {
							// 		appId: wxCode.appId,
							// 		timeStamp: wxCode.timeStamp,
							// 		nonceStr: wxCode.nonceStr,
							// 		package: wxCode.package,
							// 		signType: wxCode.signType,
							// 		paySign: wxCode.paySign,
							// 	},
							// 	function(res) {
							// 		if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 			// 使用以上方式判断前端返回,微信团队郑重提示：
							// 			// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							// 		}
							// 	}
							// );
							if (res.data.isQrCode == 1) {
								uni.navigateTo({
									url: './codePayView?payUrl=' + res.data.payUrl + '&payType=' + this
										.selectId
								})
							} else {
								uni.navigateTo({
									url: './payView?payUrl=' + res.data.payUrl + '&payType=' + this
										.selectId
								})
							}
						} else if (this.selectId == 12) {
							let url = res.data.payUrl
							console.log(url);
							//#ifdef APP-PLUS
							plus.runtime.openURL(url)
							//#endif

							//#ifdef H5
							window.location.href = url
							//#endif
						} else if (this.selectId == 4) {
							let url = res.data.payUrl
							//#ifdef APP-PLUS
							plus.runtime.openWeb(url)
							//#endif

							//#ifdef H5
							window.location.href = url
							//#endif
						} else if(this.selectId == 21){
							let url = res.data.payUrl.qrData
							//#ifdef APP-PLUS
							plus.runtime.openWeb(url)
							//#endif
							//#ifdef H5
							window.location.href = url
							//#endif
						}else {
							let payInfo = {
								payUrl: res.data.payUrl
							}
							console.log(encodeURIComponent(JSON.stringify(payInfo)))
							//#ifdef APP-PLUS
							plus.runtime.openURL('http://nweb.kuailegou.fun/pages/index/payUrl?payUrl=' +
								encodeURIComponent(JSON.stringify(payInfo)))
							//#endif

							//#ifdef H5
							window.location.href = 'http://nweb.kuailegou.fun/pages/index/payUrl?payUrl=' +
								encodeURIComponent(JSON.stringify(payInfo))
							//#endif
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		.typeText {
			padding-left: 30rpx;
			height: 116rpx;
			width: 100%;
			border-bottom: 10rpx #F5F5F5 solid;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #353535;
			line-height: 116rpx;
		}

		.typeContent {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 109rpx;
			border-bottom: 2px solid #F2F2F2;

			.left {
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #353535;
				line-height: 40rpx;

				.bankImg {
					width: 44rpx;
					height: 44rpx;
					margin-right: 16rpx;
				}
			}

			.iconImg {
				margin-right: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.next {
			margin: 324rpx 0 0 30rpx;
			text-align: center;
			line-height: 90rpx;
			width: 690rpx;
			height: 90rpx;
			background: #00C538;
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>